import { Component, OnInit } from '@angular/core';
import { HeroService } from "../hero.service";
import { Hero } from "../hero";
@Component({
  selector: 'my-heroes',
  template: `
<div>
  <label>Hero name:</label> <input #heroId /><input #heroName />
  <button (click)="add(heroId.value,heroName.value); heroId.value='';heroName.value=''">
    Add
  </button>
</div>
<hero-list [heroes]="heroes"></hero-list>

  `,
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  ngOnInit(): void {
    this.getHeroes();
  }
  constructor(private heroService: HeroService) { }
  title = 'MyHeros!';
  hero:Hero={id:1,name:"zmz"};
  heroes:Hero[];// = this.heroService.getHeros();
  getHeroes(){
    this.heroService.getHeroes3().then(heroes => this.heroes = heroes);
  }
  add2(id:number,name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.create(id,name)
    .subscribe(hero => {
        this.heroes.push(hero);
      });
  }
  add(id:number,name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.create2(id,name)
    .then(hero => {
      this.heroes.push(hero);
    });
  }
}
